<template>
  <div class="goods-container">
    <div class="goods-container-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          @click="skipDtail(index)"
          v-for="(item, index) in X_goodsListAll"
          :key="index"
          class="kinds-all"
        />
        <!-- 操作属性的时候没有显示出来,是因为没有去操作属性 -->
      </van-sidebar>
    </div>
    <!-- 右边 -->
    <div class="goods-container-right">
      <div>
        <div
          :id="index"
          v-for="(item, index) in X_goodsListAll"
          :key="index"
          class="kinds-infos"
        >
          <h2 class="goods-title">{{ item.name }}</h2>
          <!-- 第一层 -->

          <!-- 第二层循环,循环的是一层里面的goods -->
          <div v-for="(goods, i) in item.foods" :key="i">
            <div class="goods-container-info positionBox">
              <!-- 右边头像 -->
              <div class="container-info-img" @click="skipDtailData(goods)">
                <img :src="goods.imgUrl" alt="" />
              </div>
              <div>
                <h2>{{ goods.name }}</h2>
                <p class="goods-preference">
                  <span>特惠</span>
                </p>
                <p class="goods-sell">{{ goods.sellCount }}</p>
                <div class="goods-price">
                  <span class="goods-discounts">&yen;{{ goods.price }}</span>
                  <span class="goods-original">&yen;{{ goods.price }}</span>
                  <!-- <button class="goods-addGoods" >+</button> -->
                  <!-- 步计器 -->
                  <!-- <van-stepper theme="round" button-size="22" disable-input> -->
                  <div class="goods-all">
                    <button
                      class="goods-subtractGoods"
                      v-show="goods.num > 0"
                      @click="
                        $store.commit('changeNum', { id: goods.id, num: -1 })
                      "
                    >
                      -
                    </button>
                    <span class="goods-numGoods" v-show="goods.num > 0">{{
                      goods.num
                    }}</span>
                    <button
                      class="goods-addGoods"
                      @click="
                        $store.commit('changeNum', { id: goods.id, num: +1 })
                      "
                    >
                      +
                    </button>
                  </div>
                  <!-- </van-stepper> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="padding-botton"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_goodsList } from "@/api/info"; //这里不行的时候就是用@
import BS from "better-scroll";
import { component } from "vue/types/umd";
// 第一步下载后,引入better-scroll
@Component
export default class Shop extends Vue {
  activeKey: number = 0; //激活索引左边,这个必须在100%的电脑情况下,才能使用,不然会出现有小数点的情况,定位就不准确,因为手机适配只会是100%,手机不会出现影响
  //侧边分类
  // goodsList: any = [{}];
  //实例对象
  scroll: any = "";
  value: any = {}; //计数器的绑定数据

  //添加商品到按钮点击事件

  //计算属性放共享数据
  get X_goodsListAll(): any {
    return this.$store.state.goodsListAll;
  }

  //获取商品具体信息
  // 第二步，在mounted里面，实例化对象
  mounted(): void {
    // 2-1.找到丝滑的整个大容器，就是最外层容器（实例化对象一步做的话，会报错，所以获取到节点赋给一个变量，在实例）
    let domRight: any = document.querySelector(".goods-container-right");
    //  2-2实例对象在数据里面定义，再实例化，（注意：这个bug是使用new BS（）里面必须只有一个根节点）
    this.scroll = new BS(domRight, {
      click: true,
      probeType: 3, //实时派发滚动事件
    });
    this.scroll.on("scroll", (pos: any) => {
      let y = Math.abs(pos.y); //不是滑动出距离,是点击屏幕拉动,打印才会有数据
      //  console.log(y);
      // console.log(this.domHeight)
      for (let obj of this.domHeight) {
        if (y >= obj.min && y < obj.max) {
          this.activeKey = obj.index;
        }
      }
    });
    //  2-4在设置了better-scroll后就不能再点击图片跳转了,直接通过实例对象,第二个参数,添加click=true
  }
  skipDtail(i: number) {
    // 2-3先获取先滚动的所有容器，在赋给一个变量
    let dom = document.querySelectorAll(".kinds-infos");
    // 然后再用我们实例的对象。scrollToElement(dom,动画事件),前者可以直接通过索引对应直接跳转
    this.scroll.scrollToElement(dom[i], 800);
  }
  //点击头像跳转到详情页
  skipDtailData(goods: any) {
    // 传递参数到详情页
    this.$router.push({ path: "/detail", query: goods });
  }
  //计算属性,获取容器的高度
  get domHeight(): Array<any> {
    let arr: any = []; //定义一个数组,存放返回的数据
    let allHeight: any = 0; //定义一个每次最小的总高度
    this.X_goodsListAll.forEach((item: any, index: number) => {
      //这里直接获取index,就要报错,因为他要的是字符串,但是我们获取的是number
      let nowHeight = document.getElementById(index + "")?.offsetHeight;
      console.log(nowHeight);
      arr.push({ min: allHeight, max: allHeight + nowHeight, index: index });
      allHeight += nowHeight;
    });
    return arr;
  }
  //获取种类数据
  async getList() {
    let res: any = await $_goodsList();
    console.log(res.goodsList);

    // let { goodsList }: any = res; //报错原因是因为没有定义类型
    // this.goodsList = goodsList;
    this.$store.commit("changeListAll", res.goodsList);
  }

  //生命周期
  created(): void {
    //获取种类数据
    this.getList();
    //获取商品具体信息
    // this.getShopInfo()
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/theme";
.padding-botton {
  height: 80px;
}
.van-sidebar {
  width: 88px;
}
.positionBox {
  position: relative;
}
.goods-price {
  margin-top: 10px;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // border: 1px solid #ccc;

  /*   .add-stepper{
    position: absolute;
    bottom: 15px;
    right: 10px;
    display: none;
  } */
  .goods-original {
    color: rgb(181, 181, 181);
    font-size: 14px;
    margin: 4px;
  }
  .goods-discounts {
    color: $active;
    font-size: 20px;
    font-weight: bold;
  }
  .goods-all {
    position: absolute;
    right: 10px;
    bottom: 15px;
    .goods-addGoods {
      background-color: $active;
      border: none;
      width: 22px;
      line-height: 22px;
      border-radius: 50%;
      font-size: 16px;
    }
    .goods-numGoods {
      font-size: 16px;
      margin: 0 10px;
    }
    .goods-subtractGoods {
      background-color: $active;
      border: none;
      width: 22px;
      line-height: 22px;
      border-radius: 50%;
      font-size: 16px;
    }
  }
}
.goods-sell {
  color: rgb(181, 181, 181);
}
.goods-preference {
  margin: 10px 0;
  span {
    background-color: rgb(238, 238, 238);
  }
}
.goods-container-info {
  display: flex;
  padding: 14px;
  .container-info-img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin-right: 10px;
    align-self: center;
    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }
}
.goods-title {
  width: 100%;
  line-height: 30px;
  padding: 0 5px;
  background-color: rgb(244, 244, 244);
}

.van-sidebar-item--select::before {
  background-color: $active;
}
.goods-container {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  .goods-container-left {
    width: 87px;
    // background-color: aqua;
    height: 100%;
    overflow: scroll;
    padding-bottom: 80px;
  }
  .goods-container-left::-webkit-scrollbar,
  .goods-container-right::-webkit-scrollbar {
    display: none;
  }
  .goods-container-right {
    // background-color: rgb(132, 175, 76);
    height: 100%;
    width: 100%;
    flex: 1;
    overflow: scroll;
    // display: flex;
    // flex-direction: column;
    flex-wrap: wrap;
  }
}
</style>